<template>
    <div class="main">
        <div class="air-column">
            <h2>乘机人</h2>
            <el-form class="member-info"  :model="form" :rules="rules" ref="userForm">
                <!-- 乘机人一组信息，循环users -->
                <el-form-item prop="users"><div>
                    <div class="member-info-item" 
                    v-for="(item, index) in form.users"
                    :key="index">

                        <el-form-item label="乘机人">
                            <!-- 需要进行双向数据绑定 -->
                            <el-input 
                            placeholder="姓名" 
                            class="input-with-select" 
                            v-model="item.username">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="证件类型">
                            <el-input 
                            placeholder="证件号码"  
                            class="input-with-select"
                            v-model="item.id">
                                <el-select 
                                slot="prepend"
                                :value="item.idType"  
                                v-model="item.idType"         
                                placeholder="请选择">
                                    <el-option label="身份证" :value="1" :checked="true"></el-option>
                                    <el-option label="护照" :value="2" ></el-option>                           
                                </el-select>
                            </el-input>
                        </el-form-item>

                        <span class="delete-user" @click="handleDeleteUser(index)">-</span>
                    </div>
                </div></el-form-item>
            </el-form>

            <el-button class="add-member" type='primary' @click="handleAddUsers">添加乘机人</el-button>
        </div>

        <div class="air-column">
            <h2>保险</h2>
            <div>
                <!-- 循环渲染保险数据 -->
                <div class="insurance-item" 
                v-for="(item, index) in infoData.insurances"
                :key="index">
                    <el-checkbox 
                    :label="`${item.type}：￥${item.price}/份×1  最高赔付${item.compensation}`" 
                    border
                    @change="handleInsurance(item.id,item.price)">
                    </el-checkbox> 
                </div>
            </div>
        </div>

        <div class="air-column">
            <h2>联系人</h2>
            <div class="contact">
                <el-form label-width="80px" :model="form" :rules="rules" ref="form">
                    <el-form-item label="姓名" prop="contactName">
                        <el-input v-model="form.contactName"></el-input>
                    </el-form-item>

                    <el-form-item label="手机" prop="contactPhone">
                        <el-input 
                        placeholder="请输入内容" 
                        v-model="form.contactPhone">
                            <template slot="append">
                            <el-button @click="handleSendCaptcha">发送验证码</el-button>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="验证码" prop="captcha">
                        <el-input v-model="form.captcha"></el-input>
                    </el-form-item>
                </el-form>   
                <el-button type="warning" class="submit" @click="handleSubmit">提交订单</el-button>
            </div>
        </div>
        <span>{{allPrice}}</span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            form: {
                // 乘机人的列表
                users:[
                    {
                        username: "",
                        id: "",
                        idType: 1
                    }
                ],
                insurances: [],
                contactName: "",
                contactPhone: "",
                captcha: "", // 文档中缺少该属性（文档中写错了）
                invoice: false,
                seat_xid: this.$route.query.seat_xid,
                air: this.$route.query.id,
            },
            idType: 1,

            // 当前机票的详细信息
            infoData: {},

            rules: {
                users: [
                    {
                        validator: (r, v, cb) => {
                            let valid = true;

                            v.forEach(item => {
                                if(!valid) return;
                                Object.keys(item).forEach(key => {
                                    if(key === "username" && !item[key]){
                                        return cb(new Error("乘机人姓名不能为空"))
                                    }

                                    if(key === "id"){
                                        if(!item[key]){
                                            return cb(new Error("乘机人证件号码不能为空"))
                                        }

                                        if(item.idType == 1 && item[key].length !== 18){
                                            return cb(new Error("乘机人证件号码格式错误"))
                                        }

                                        if(item.idType == 2 && item[key].length !== 9){
                                            return cb(new Error("乘机人证件号码格式错误"))
                                        }
                                    }                               
                                })
                            })

                            cb();
                        }
                    }
                ],
                contactPhone: [
                    {required: true, message: '手机号码不能为空'},
                    { 
                        validator: (r, v, cb) => {
                            if(/^1[3-9][0-9]{9}$/.test(v) == false){
                                return cb(new Error("手机号码格式错误"))
                            }
                            cb();
                        }
                    },
                ],
                contactName: [{ required: true, message: '联系人不能为空'}],
                captcha: [{ required: true, message: '验证码不能为空'}],
            }
        }
    },
    computed: {
        // 总价格，展示在侧边栏组件
        allPrice(){
            // 先判断infoData是否有数据
            if(!this.infoData.seat_infos){
                return;
            }

            let price = 0;
            // 单价
            price += this.infoData.seat_infos.org_settle_price;
            // 基建燃油费
            price += this.infoData.airport_tax_audlet;
            // 保险
            this.infoData.insurances.forEach(v => {
                // 如果选中的id数组包含了当前的保险id，需要加上保险的价格 
                if(this.form.insurances.indexOf(v.id) > -1){
                    price += v.price;
                }
            });
            // 人数的数量
            price *= this.form.users.length;
            // 把总价保存到store
            this.$store.commit("air/setAllPrice", price)
            return '';
        }
    },
    mounted(){
        // 请求机票详细信息（保险还有右侧栏需要的数据）
        const {id, seat_xid} = this.$route.query;
        this.$axios({
            url: "/airs/" + id,
            params: {
                seat_xid
            }
        }).then(res => {
            // 赋值给机票的详细信息
            this.infoData = res.data;

            // 把infoData保存到store
            this.$store.commit("air/setOrderDetail", this.infoData)
        })
    },
    methods: {
        // 添加乘机人
        handleAddUsers(){
            this.form.users.push({
                username: "",
                id: "",
                idType: 1
            })
            this.$store.commit("air/Add_Pnum")
        },

        // 处理保险数据的
        handleInsurance(id,price){
            // 先判断数组中是否存在该id
            const index = this.form.insurances.indexOf(id);

            // 如果已经有了这个id，说明当前是取消的状态
            if(index > -1){
                // 删除该id
                this.form.insurances.splice(index, 1);
                //提交到全局变量，减少价格
                this.$store.commit("air/deleteInsurance",price)
            }else{
                // 没有id就是新增
                this.form.insurances.push(id);
                //提交到全局变量，添加价格
                this.$store.commit("air/addInsurance",price)
            }
            
            
        },
        
        // 移除乘机人
        handleDeleteUser(index){
            this.form.users.splice(index, 1);
            //将人数减少1个
            this.$store.commit("air/deletePnum")
        },
        
        // 发送手机验证码
        handleSendCaptcha(){ 
            this.$refs.form.validateField("contactPhone")

            if(/^1[3-9][0-9]{9}$/.test(this.form.contactPhone) == false){
                return;
            }

            // 调用store/user.js中发送验证码方法
            this.$axios({
                url:"/captchas",
                method:"post",
                data:{
                     tel:this.form.contactPhone
                }
            }
            ).then(res => {
                console.log(res)
                this.$message.success("验证码发送成功：000000")
            } )
        },

        // 提交订单
        handleSubmit(){
            this.$refs.userForm.validate(valid1 => {
                this.$refs.form.validate(valid2 => {
                    if(!valid1 || !valid2) return;

                    this.form.users = this.form.users.map(v => {
                        const {idType, ...props} = v;
                        return props;
                    })

                    // console.log("测试订单情况",this.$store.state.user.userInfo.token)
                    //调用提交订单的接口
                    this.$axios({
                        url: "/airorders",
                        method: "POST",
                        data: this.form,
                        headers: {
                            // 必须要做token前面加上`Bearer `字符串，后面有一个空格的
                            Authorization: `Bearer ` + this.$store.state.user.userInfo.token
                        }
                    }).then(res => {
                        this.$message.success("订单提交成功");
                        console.log()
                        // 跳转到付款页
                        setTimeout(() => {
                            this.$router.push({
                                path: "/air/pay",
                                query: {
                                    id: res.data.data.id // 订单id
                                }
                            }) 
                        }, 1500);     
                    })

                })
            })

            return;
            // 自定义表单的验证
            // const rules = {
            //     // 校验用户列表
            //     users: {
            //         errMessage: "乘机人信息不能为空",
            //         // 校验的函数,该函数返回是true的证明验证通过，如果是false就验证失败
            //         validator: () => {
            //             let valid = true;
            //             this.form.users.forEach(v => {
            //                 // 只要有一个属性的值是空的话表单没通过
            //                 if(!v.username || !v.id){
            //                     valid = false;
            //                 }
            //             });

            //             return valid;
            //         }
            //     },

            //     // 校验联系人
            //     contactName: {
            //         errMessage: "联系人不能为空",
            //         validator: () => {
            //             return !!this.form.contactName;
            //         }
            //     },

            //     // 校验手机号码
            //     contactPhone: {
            //         errMessage: "手机号码不能为空",
            //         validator: () => {
            //             return !!this.form.contactPhone;
            //         }
            //     },

            //     // 校验验证码
            //     captcha: {
            //         errMessage: "验证码不能为空",
            //         validator: () => {
            //             return !!this.form.captcha;
            //         }
            //     }
            // }

            // 循环rules对象调用validator方法实现校验
            // console.log(Object.keys(rules))

            // 先假设所有校验都是通过的
            // let  valid = true;
            // Object.keys(rules).forEach(v => {
            //     // 如果已经有字段校验不通过，就不用继续判断了
            //     if(!valid) return;

            //     const item = rules[v];
            //     // 执行每个字段下的validator函数
            //     valid = item.validator();
                
            //     if(!valid){
            //         this.$message.error(item.errMessage);
            //     }
            // })

            // 如果验证没通过，就直接返回
            //if(!valid) return;
        }
    }
}
</script>

<style scoped lang="less">
    .air-column{
        border-bottom:1px #ddd dashed;
        padding-bottom: 20px;   
        margin-bottom: 20px;
    }

    .air-column h2{
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: normal;
    }

    /deep/ .el-select .el-input {
        width: 130px;
    }

    .input-with-select{
        width:590px;
    }

    .input-with-select /deep/  .el-input-group__prepend {
        background-color: #fff;
    }
    .member-info /deep/ .el-form-item{
        //margin-bottom:0;
    }

    .member-info-item{
        border-bottom:1px #eee dashed;
        padding-bottom: 20px;
        position: relative;

        &:first-child{
            .delete-user{
                display: none;
            }
        }
    }

    .add-member{
        margin-top:20px;
    }

    .delete-user{
        display: block;
        background:#ddd;
        width:16px;
        height:16px;
        font-size:14px;
        text-align: center;
        line-height: 16px;
        color:#fff;
        cursor: pointer;
        border-radius: 50px;
        position:absolute;
        right:-30px;
        top:50%;
    }

    .insurance{
        > div{
            margin-top:10px;
        }
    }

    .insurance-item{
        margin-bottom: 20px;
    }

    .contact{
        /deep/ .el-input{
            width:50%;
        }
    }

    .submit{
        margin: 50px auto;
        display: block;
        width:250px;
        height:50px;
    }
</style>